<template>
  <div class="he-matter">
    <el-row class="he-header">
      <el-col :span="6">商品描述</el-col>
      <el-col :span="4">单价/数量</el-col>
      <el-col :span="3">买家/收货人</el-col>
      <el-col :span="3">实付金额</el-col>
      <el-col :span="3">支付方式</el-col>
      <el-col :span="3">订单状态</el-col>
      <el-col :span="2">操作</el-col>
    </el-row>
    <div class="he-body" v-loading="loading">
      <div class="he-item" v-for="(item, index1) in value" :key="item.id">
        <el-row class="he-item__header">
          <el-col :span="3" class="he-item__time">
            {{ item.created_time | timeFormat('yyyy-mm-dd hh:MM:ss') }}
          </el-col>
          <el-col :span="4" style="height: 48px">
            <span class="he-item__sn__title"> 订单号： </span>
            <span class="he-item__sn">
              {{ item.order_sn }}
            </span>
          </el-col>
          <el-col :span="3" type="flex" class="he-platform el-row--flex is-align-middle">
            <he-icon
              class="he-platform__icon"
              size="18px"
              :type="item.source === 'weapp' ? 'le-icon-xiaochengxu' : item.source === 'wechat' ? 'le-icon-wehcat' : ''"
            ></he-icon>
            {{ item.source === 'weapp' ? '微信小程序' : item.source === 'wechat' ? '公众号' : '' }}
          </el-col>
          <el-col :span="10" style="opacity: 0">1</el-col>
          <el-col :span="4" class="he-remarks el-row--flex is-justify-end is-align-middle">
            <el-popover
              v-if="item.note && item.is_recycle === 0"
              placement="top-end"
              max-width="400"
              trigger="hover"
              :content="item.note"
            >
              <he-icon
                slot="reference"
                style="color: #fbad15"
                title="商家备注"
                :id="item.id + '_note__edit'"
                width="480"
                top="35vh"
                v-popup.merchantNotes="item"
                module="order"
                class="he-remarks__icon"
                type="le-icon-note"
              ></he-icon>
            </el-popover>
            <div
              v-if="!item.note && item.is_recycle === 0"
              title="商家备注"
              :id="item.id + '_note'"
              width="480"
              top="35vh"
              v-popup.merchantNotes="item"
              module="order"
            >
              <span style="color: #dcdfe6" class="he-remarks__icon le-icon le-icon-note" type="le-icon-note"></span>
            </div>
            <span
              v-if="item.status === 204 || item.status === 101 || item.status === 102 || item.status === 103"
              @click="openDelete(item)"
              style="color: #dcdfe6; margin-left: 10px"
              class="he-remarks__icon le-icon le-icon-trash"
              type="le-icon-trash"
            ></span>
          </el-col>
        </el-row>
        <el-row class="he-item__body el-row--flex">
          <el-col class="he-product" :span="10">
            <el-row class="he-goods" v-for="(good, index2) in item.goods.slice(0, 3)" :key="index2">
              <el-col :span="16" class="el-row--flex">
                <div class="he-goods__img__box">
                  <el-image class="he-goods__img" :src="good.goods_image">
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                  <he-link href="order/afterDetail" :query="{ order_goods_id: good.id }">
                    <div class="he-goods__after" v-if="good.after_sales">
                      {{ good.after | getAfter }}
                      <he-icon class="he-goods__after__icon" type="le-icon-arrow-right"></he-icon>
                    </div>
                  </he-link>
                </div>
                <div class="he-name-attr">
                  <div class="he-name">{{ good.goods_name }}</div>
                  <div class="he-attr">{{ good.show_goods_param }}</div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="he-price" v-if="item.type == 'task'">
                  {{ good.goods_score }}积分+￥{{ good.goods_price }}
                </div>
                <div class="he-price" v-else>￥{{ good.goods_price }}</div>
                <div class="he-price">×{{ good.goods_number }}</div>
              </el-col>
            </el-row>
            <el-row v-if="item.goods.length > 3" class="he-goods__more">
              <he-link href="order/orderDetail" :query="{ id: item.id }"> 查看更多商品> </he-link>
            </el-row>
          </el-col>
          <el-col class="he-buyer-consignee he-vertical__center" :span="3">
            <div class="he-buyer">{{ item.user.nickname }}</div>
            <div class="he-consignee">
              <p class="he-consignee__text">{{ item.buyer.name }}</p>
              <p class="he-consignee__text">{{ item.buyer.mobile }}</p>
            </div>
          </el-col>
          <el-col class="he-actually-paid he-vertical__center" :span="3">
            <div class="he-price">￥{{ item.pay_amount }}</div>
            <div class="he-shipping">（含运费￥{{ item.freight_amount }}）</div>
            <he-icon
              v-if="item.status === 100"
              type="le-icon-editor"
              class="he-edit__price"
              :id="item.id + '_price'"
              :title="'修改价格'"
              width="431"
              v-popup.modifyPrice="item"
              module="order"
            ></he-icon>
          </el-col>
          <el-col class="he-payment-method he-vertical__center" :span="3">
            {{ item.pay_type | getPayType }}
          </el-col>
          <el-col class="he-order-status he-vertical__center" :span="3">
            <div class="he-status">{{ item.status | orderStatus }}</div>
            <div v-if="item.is_recycle !== 1">
              <he-link href="order/orderDetail" :query="{ id: item.id }">
                <el-button type="text" class="he-click">订单详情</el-button>
              </he-link>
            </div>
            <div v-if="item.is_recycle !== 1">
              <el-button
                type="text"
                class="he-click"
                title="物流信息"
                :hide_cancel="true"
                v-if="item.status >= 201 && item.freight.length > 0"
                :width="740"
                module="order"
                top="15vh"
                :id="item.id + '_logistics_information'"
                v-popup.logisticsInformation="item"
                >查看物流</el-button
              >
            </div>
          </el-col>
          <el-col class="he-operating he-vertical__center" :span="2">
            <div v-if="item.status === 201">
              <el-button
                v-show="item.status === 201"
                type="text"
                module="order"
                title="订单发货"
                :style="afterShow(item) ? 'color:#DCDFE6;' : ''"
                :id="item.id + '_shipping'"
                width="1049"
                top="5vh"
                class="he-click"
                :disabled="afterShow(item)"
                v-popup.orderShipping="{ index: index1, item: item }"
                action="onReload"
                >发货</el-button
              >
            </div>
            <div v-show="item.status === 100">
              <popconfirm
                @confirm="cancelItem({ index: index1, item: item })"
                title="订单取消请谨慎操作，确定取消？"
                width="392px"
                top="35vh"
              >
                <el-button type="text" class="he-click">取消订单</el-button>
              </popconfirm>
            </div>
            <div v-show="item.status === 201">
              <el-button
                type="text"
                title="修改地址"
                :style="afterShow(item) ? 'color:#DCDFE6;' : ''"
                width="524"
                module="order"
                top="35vh"
                :id="item.id + '_change_address'"
                :disabled="afterShow(item)"
                class="he-click"
                v-popup.changeAddress="{ index: index1, item: item }"
                >修改地址</el-button
              >
            </div>
            <div v-show="item.status >= 201 && item.status <= 202 && item.freight.length !== 0">
              <el-button
                type="text"
                title="修改物流"
                :style="afterShow(item) ? 'color:#DCDFE6;' : ''"
                width="1040"
                module="order"
                top="15vh"
                :id="item.id + '_modify_logistics'"
                :disabled="afterShow(item)"
                class="he-click"
                v-popup.modifyLogistics="{ index: index1, item: item }"
                >修改物流</el-button
              >
            </div>
            <div v-show="item.status === 202">
              <popconfirm
                :disabled="afterShow(item)"
                @confirm="confirmReceipt({ index: index1, item: item })"
                title="确认收货请谨慎操作，确定买家已收货？"
                width="440px"
                top="35vh"
              >
                <el-button
                  type="text"
                  :style="afterShow(item) ? 'color:#DCDFE6;' : ''"
                  :disabled="afterShow(item)"
                  class="he-click"
                  >确认收货</el-button
                >
              </popconfirm>
            </div>
            <div v-if="item.is_recycle === 1">
              <popconfirm @confirm="restoreItem({ item: item })" title="确定恢复该订单？" width="392px" top="35vh">
                <el-button type="text" class="he-click">恢复</el-button>
              </popconfirm>
            </div>
          </el-col>
        </el-row>
        <el-row class="he-item__footer" v-if="item.buyer.note">
          <el-col :span="24">买家留言：{{ item.buyer.note }}</el-col>
        </el-row>
      </div>
    </div>
    <div class="el-row--flex is-justify-end he-footer">
      <div class="he-tabpane-pagination">
        <el-pagination
          background
          @current-change="currentChange"
          :current-page="page.current"
          :page-count="page.count"
          layout=" prev, pager, next, jumper"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import popconfirm from '../../../components/popconfirm.vue';
export default {
  components: {
    popconfirm
  },
  name: 'orderAll',
  props: {
    value: {
      type: Array
    },
    page: {
      type: Object
    },
    loading: {
      type: Boolean
    }
  },
  methods: {
    currentChange(e) {
      this.page.current = e;
      this.$emit('request', this.page);
    },
    deleteItem(e) {
      if (e.item.is_recycle === 1) {
        this.$heshop
          .recycle('delete', e.item.id, { include: 'order' })
          .then(() => {
            this.$message.success('删除成功');
            this.onReload();
          })
          .catch(err => {
            this.$message.error(err.data.message);
          });
      } else {
        this.$heshop
          .order('delete', e.item.id)
          .then(() => {
            this.$message.success('删除成功');
            this.onReload();
          })
          .catch(err => {
            this.$message.error(err.data.message);
          });
      }
    },
    restoreItem: function (e) {
      this.$heshop
        .recycle('put', { id: e.item.id, include: 'order' }, null)
        .then(() => {
          this.$message.success('恢复成功');
          this.onReload();
        })
        .catch(err => {
          this.$message.error(err.data.message);
        });
    },
    cancelItem(e) {
      this.$heshop
        .order('put', { id: e.item.id, behavior: 'cancel' }, null)
        .then(res => {
          this.$message.success('取消成功');
          this.$set(this.value[e.index], 'status', res.status);
          this.onReload();
        })
        .catch(err => {
          this.$message.error(err.data.message);
        });
    },
    confirmReceipt(e) {
      this.$heshop
        .order('put', { id: e.item.id, behavior: 'received' }, null)
        .then(res => {
          this.$message.success('收货成功');
          this.$set(this.value[e.index], 'status', res.status);
          this.onReload();
        })
        .catch(err => {
          this.$message.error(err.data.message);
        });
    },
    afterShow(item) {
      let goods = item.goods;
      let status = false;
      for (let i = 0; i < goods.length; i++) {
        status =
          goods[i].after_sales === 0 ||
          (goods[i].after.status == 200 && goods[i].after.return_number != goods[i].goods_number) ||
          goods[i].after.status == 201
            ? false
            : true;
        if (!status) {
          break;
        }
      }
      return status;
    },
    onReload() {
      this.$emit('count');
    },
    openDelete: function (item) {
      let str = '订单删除请谨慎操作，确定删除？';
      if (item.status === 102) {
        str = '彻底删除后订单无法恢复，确定删除？';
      }
      this.$confirm(str, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      })
        .then(() => {
          this.deleteItem({ item });
        })
        .catch(() => {});
    }
  },
  filters: {
    orderStatus: function (status) {
      switch (status) {
        case 100:
          return '待付款';
        case 101:
        case 102:
        case 103:
          return '已关闭';
        case 201:
          return '待发货';
        case 202:
          return '待收货';
        case 203:
          return '已收货';
        case 204:
          return '已完成';
      }
    },
    getPayType: function (type) {
      switch (type) {
        case 'wechat':
          return '微信支付';
        case 'alipay':
          return '支付宝支付';
        default:
          return '— —';
      }
    },
    getAfter: function (after) {
      if (after.status === 200) {
        if (after.type === 0) {
          return '已退款';
        } else if (after.type === 1) {
          return '已退款';
        } else if (after.type === 2) {
          return '已换货';
        }
      } else if (after.status === 101) {
        return '已拒绝';
      } else if (after.status === 201) {
        return '已拒绝';
      } else {
        return '售后中';
      }
    }
  }
};
</script>
<style scoped lang="scss">
.he-matter {
}

.he-header {
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: #000000;
  opacity: 0.85;
  background: #f5f7fa;
}

.he-item {
  margin-top: 12px;
  background: #ffffff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.he-item__header {
  height: 48px;
  line-height: 48px;
  background: #f5f7fa;
}

.he-item__time {
  font-size: 14px;
  font-weight: 500;
  color: #000000;
  opacity: 0.85;
  padding-left: 20px;
}

.he-item__sn {
  font-size: 14px;
  font-weight: 500;
  color: #000000;
  opacity: 0.85;
}

.he-item__sn__title {
  font-size: 14px;
  font-weight: 500;
  color: #000000;
  opacity: 0.45;
}

.he-platform__icon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}

.he-platform {
}

.he-remarks {
  height: 48px;
  padding-right: 25px;

  > span {
    height: 48px;
  }
}

.he-remarks__icon {
  font-size: 20px !important;
  width: 18px;
  height: 16px;
  cursor: pointer;
  line-height: 48px;
  /*margin: 15px 0;*/
  &:hover {
    color: red;
  }
}
.le-icon-note,
.le-icon-trash {
  &:hover {
    color: #623ceb !important;
  }
}
.he-vertical__center {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

.he-product {
  border-right: 1px solid #dcdfe6;

  .he-goods__more {
    height: 41px;
    line-height: 41px;
    color: #595959;
    font-size: 12px;
    text-align: center;
    cursor: pointer;
  }

  .he-goods {
    padding: 20px;

    .he-goods__img__box {
      position: relative;
      width: 80px;
      height: 80px;
      background: #f2f2f2;
      margin-right: 12px;

      .he-goods__img {
        position: absolute;
        width: 80px;
        height: 80px;
      }

      .he-goods__after {
        width: 80px;
        height: 24px;
        line-height: 24px;
        background-color: #f5212d;
        color: #fff;
        font-size: 12px;
        bottom: 0;
        text-align: center;
        position: absolute;
        cursor: pointer;

        .he-goods__after__icon {
          font-size: 10px !important;
        }
      }
    }

    .he-name {
      width: 233px;
      font-size: 14px;
      font-weight: 500;
      color: #010101;
      opacity: 0.85;
    }

    .he-attr {
      font-size: 12px;
      width: 233px;
      font-weight: 500;
      color: #010101;
      opacity: 0.65;
      margin-top: 6px;
    }

    .he-price {
      font-size: 14px;
      font-weight: 500;
      color: #000000;
      line-height: 22px;
      opacity: 0.85;
      text-align: center;
    }
  }

  .he-goods:not(:last-child) {
    border-bottom: 1px solid #dcdfe6;
  }
}

.he-buyer-consignee {
  padding: 6px;
  border-right: 1px solid #dcdfe6;
  display: flex;
  flex-direction: column;
  justify-content: center;

  .he-buyer {
    font-size: 14px;
    font-weight: 500;
    color: #000000;
    line-height: 18px;
    opacity: 0.85;
    text-align: center;
    margin-top: 13px;
    margin-bottom: 12px;
  }

  .he-consignee {
    width: 100%;
    height: 60px;
    line-height: 60px;
    background: #f5f7fa;
    border-radius: 8px;
    padding-top: 10px;
  }

  .he-consignee__text {
    font-size: 14px;
    font-weight: 500;
    color: #000000;
    line-height: 18px;
    opacity: 0.85;
    margin: 0;
    text-align: center;
  }
}

.he-actually-paid {
  border-right: 1px solid #dcdfe6;
  padding: 19px 20px 20px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;

  .he-price {
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #000000;
    opacity: 0.85;
  }

  .he-shipping {
    font-size: 12px;
    font-weight: 500;
    color: #000000;
    opacity: 0.45;
  }

  .he-edit__price {
    width: 14px;
    height: 14px;
    margin-top: 9px;
    cursor: pointer;
    color: #bbbfc8;
  }
}

.he-payment-method {
  font-size: 14px;
  border-right: 1px solid #dcdfe6;
  text-align: center;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.he-status {
  font-size: 14px;
  margin-top: 18px;
}

.he-order-status {
  border-right: 1px solid #dcdfe6;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.he-operating {
  padding-top: 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.he-item__footer {
  height: 32px;
  line-height: 32px;
  border-radius: 4px;
  background: #fff5d1;
  font-size: 12px;
  font-weight: 500;
  color: #000000;
  opacity: 0.85;
  padding: 0 20px;
}

.he-footer {
  padding: 16px 0 0 0;
}

.he-delete-order {
  width: 16px;
  height: 18px;
  background-color: pink;
  cursor: pointer;
}

.he-click {
  font-size: 14px;
  font-weight: 500;
  color: #623ceb;
  padding: 4px 16px;
}

.he-more-goods {
  text-align: center;
  height: 40px;
  line-height: 40px;
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #595959;
  cursor: pointer;
}

.he-click {
  padding: 0 !important;
  font-size: 14px !important;
}
</style>
